<!DOCTYPE html>
<html>
	<head>
			<meta charset="utf-8" />
			<title>个人博客网站</title>
			<link rel="stylesheet" type="text/css" href="css/grbk.css"/>
		</head>
		<body>
			
			
			<header>
				<div class="color">
				<div class="font">Typo</div>
				<nav>
					<ul>
						<li><a href="#">1.Home</a> </li>
						<li><a href="#">2.About</a> </li>
						<li><a href="#">3.Archives</a> </li>
						<li><a href="#">4.Contact</a> </li>
					</ul>
				</nav>
			</header>
			<div class="article0" >
			<article class="article1">
				<div class="article1-font">
					<h1>Getting your stock photos seen</h1>
					<br /><br />
					<p>Lorem ipsum dolor sit amet, consectetur
					 adipiscing elit. Praesent sed turpis turpis,
					  eu mattis sem. Sed tristique porta cursus.
					   Class <a href="#"> aptent taciti</a> sociosqu ad litora torquent
						per conubia nostra, per inceptos himenaeos. Done
						 vestibulum, enim nec condimentum ullamcorper, magna
						  ipsum sagittis sapien, vel egestas lorem mi et neque.
						   Nulla ultrices felis eget arcu vulputate at hendrerit 
						   augue euismod. Nulla at velit ac turpis sollicitudin consequat.
							Etiam leo tortor, faucibus a consectetur et, consequat venenatis
							 velit. Curabitur tempus sem vitae elit gravida a suscipit leo placerat.</p>
				</div>
				<div class="article1-font1">17th October 2011</div>
				<div class="article1-font1">Posted in<a href="#"> Articles</a></div>
				<div class="article1-font1"><a href="#"> Continue Reading >></a></div>
			</article>
			
			<article class="article2">
				<div class="article1-font">
					<h1>Top 10 tips for new bloggers</h1>
					<br /><br />
					<p>Lorem ipsum dolor sit amet, consectetur
					 adipiscing elit. Praesent sed turpis turpis,
					  eu mattis sem. Sed tristique porta cursus.
					   Class <a href="#"> aptent taciti</a> sociosqu ad litora torquent
						per conubia nostra, per inceptos himenaeos. Done
						 vestibulum, enim nec condimentum ullamcorper, magna
						  ipsum sagittis sapien, vel egestas lorem mi et neque.
						   Nulla ultrices felis eget arcu vulputate at hendrerit 
						   augue euismod.</p>
				</div>
				<div class="article1-font1">17th October 2011</div>
				<div class="article1-font1">Posted in<a href="#"> Articles</a></div>
				<div class="article1-font1"><a href="#"> Continue Reading >></a></div>
			</article>
			<article class="article2">
				<div class="article1-font">
					<h1>10 fantastic photography tips</h1>
					<br /><br />
					<p>Lorem ipsum dolor sit amet, consectetur
					 adipiscing elit. Praesent sed turpis turpis,
					  eu mattis sem. Sed tristique porta cursus.
					   Class <a href="#"> aptent taciti</a> sociosqu ad litora torquent
						per conubia nostra, per inceptos himenaeos. Done
						 vestibulum, enim nec condimentum ullamcorper, magna
						  ipsum sagittis sapien, vel egestas lorem mi et neque.
						   Nulla ultrices felis eget arcu vulputate at hendrerit 
						   augue euismod.</p>
				</div>
				<div class="article1-font1">17th October 2011</div>
				<div class="article1-font1">Posted in <a href="#"> Articles</a></div>
				<div class="article1-font1"><a href="#"> Continue Reading >></a></div>
			</article>
			
			<nav class="nav2">
				<div class="nav2-font"><a href="#"> << Older posts</a></div>
				<div class="nav2-font1"><a href="#">Newer posts ?>></a></div>
			</nav></div>
			<aside class="right">
				<section class="section0">
					<div class="section0-font">
					<h1>About me</h1>
					<br /><br />
					<p>Typo is a WordPress theme 
					based entirely on a balanced typographic
					 design. A strict grid layout keeps everything tidy,
					  allowing the content to shine.</p>
						   </div>
					<div class="section0-font1"> <a href="#">Find out more ? >> </a></div>	   
				</section>
				
				<section class="section1">
					<div class="section1-font1">
						<h1>Categories</h1>
						<br /><br />
						<a href="#" >Articles</a><br />
						<a href="#" >Design</a><br />
						<a href="#" >Graphics</a><br />
						<a href="#" >Inspiration</a><br />
						<a href="#" >Retro</a><br />
						<a href="#">Social</a><br />
					</div>
					<div class="section1-font2">
						<h1>Twitter</h1>
						<br /><br />
						<a href="#" >Facebook</a><br />
						<a href="#" >Flickr</a><br />
						<a href="#" >Behance</a><br />
						<a href="#" >Last.FM</a><br />
						<a href="#" >YouTube</a><br />
					</div>
				</section>
				
				<section class="section2">
					<div class="section0-font">
					<h1>Latest posts</h1>
					<br /><br />
					<p><a href="#"> Getting your stock photos seen
                       Top 10 tips for new bloggers
                       10 fantastic photography tips
                       Search</a></p>
					</div>
				</section>
				
				<section class="section3">
					<form action="#" target="_blank" method="post">
					<h1>Search</h1>
					<br />
					<input type="text" name="I,m looking" placeholder="I'm looking for…"   />
					</form>
				</section>
				
				
			</aside>
			
			<div style="clear: both;"></div>
			<footer class="last">
				<div class="last-tp"><img src="img/images/credits.png" /> </div>
				<div class="last-font"><a href="#">Back to top</a> </div>
			</footer>
			
		</body>
	</html>
	
